import { useEffect } from 'react'
import { useTabBarActions, useTabBarState } from '../stores/tabbar'

/**
 * 自定义 TabBar Hook
 * 提供便捷的 TabBar 操作方法
 */
export const useTabBar = () => {
  const state = useTabBarState()
  const actions = useTabBarActions()

  // 页面挂载时自动初始化 TabBar 状态
  useEffect(() => {
    actions.initTabBar()
  }, [actions])

  return {
    // 状态
    ...state,
    // 操作方法
    ...actions,

    // 便捷方法
    /**
     * 跳转到首页
     */
    goHome: () => actions.switchTabByPath('/pages/home/index'),

    /**
     * 跳转到订单页
     */
    goOrder: () => actions.switchTabByPath('/pages/order/index'),

    /**
     * 跳转到问题页
     */
    goQuestion: () => actions.switchTabByPath('/pages/question/index'),

    /**
     * 跳转到我的页面
     */
    goProfile: () => actions.switchTabByPath('/pages/profile/index'),

    /**
     * 隐藏 TabBar
     */
    hideTabBar: () => actions.setVisible(false),

    /**
     * 显示 TabBar
     */
    showTabBar: () => actions.setVisible(true),

    /**
     * 切换 TabBar 显示状态
     */
    toggleTabBar: () => actions.setVisible(!state.visible),
  }
}

export default useTabBar
